<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
    .layui-card-header {
        text-align:left;
    }
    .layuiadmin-badge {
        float:right;
        margin-top:12px;
    }
    .big-font {
        text-align:left;
        font-size: 250%;
        height: 30px;
    }
    .my-tab-item {
        vertical-align: middle;
        text-align: center;
        line-height: 40px;
        margin-right: 20px;
        padding: 0 15px 12px 15px;
        cursor: pointer;
    }
    .my-tab-item-select {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #5FB878;
    }
    .my-tab-content {
        height: 300px;
    }
</style>
</head>
<body>
<div class="layui-card-body" style="text-align: center;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">在线人数
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">时</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="userCnt"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">PV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="pv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">UV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="uv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">周访问量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="weekPv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">月访问量
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="monthPv"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <a id="weekTab" class="my-tab-item my-tab-item-select">周流量趋势</a>
                    <a id="dayTab" class="my-tab-item">天流量趋势</a>
                </div>
                <div class="layui-card-body">
                    <div id="week-container" tabId="weekTab" class="my-tab-content"></div>
                    <div id="date-container" tabId="dayTab" class="my-tab-content" style="display: none"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="browser-container" style="height:300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6 layui-col-lg6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="operatingSystem-container" style="height:300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
layui.use(['admin', "echarts"], function () {
    let admin = layui.admin;
    let echarts = layui.echarts;
    let statData;
    
    $(".my-tab-item").click(function() {
        let selectId = $(this).attr('id');
        $(".my-tab-item").each(function() {
            let eachId = $(this).attr('id');
            if (eachId === selectId) {
                $(this).addClass("my-tab-item-select");
            } else {
                $(this).removeClass("my-tab-item-select");
            }
        });
        $("[tabId]").each(function() {
            let tabId = $(this).attr('tabId');
            if (tabId === selectId) {
                $(this).show();
                if ($(this).html().length === 0) {
                    showDateChart($(this).attr('id'));
                }
            } else {
                $(this).hide();
            }
        });
    });
    
    let showDateChart = function (contetnId) {
        let dateChart = echarts.init(document.getElementById(contetnId), layui.echartsTheme);
        dateChart.setOption({
            tooltip: {trigger: "axis"},
            legend: {
                data: ['访问量(PV)', '独立用户(UV)']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: !1,
                    data: statData.statDate_items
                }
            ],
            yAxis: [{type: "value"}],
            series: [
                {
                    name: '访问量(PV)',
                    type: 'line',
                    smooth: !0,
                    itemStyle: {normal: {areaStyle: {type: "default"}}},
                    data: statData.statDate_pv
                },
                {
                    name: '独立用户(UV)',
                    type: 'line',
                    smooth: !0,
                    itemStyle: {normal: {areaStyle: {type: "default"}}},
                    data: statData.statDate_uv
                }
            ]
        });
    }
    
    let browserChart = echarts.init(document.getElementById("browser-container"), layui.echartsTheme);
    browserChart.setOption({
        title : {
            text: '浏览器分布',
            subtext: '',
            x:'center'
        },
        tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
        legend: {},
        series : []
    });
    browserChart.showLoading();
    
    let osChart = echarts.init(document.getElementById("operatingSystem-container"), layui.echartsTheme);
    osChart.setOption({
        title : {
            text: '系统分布',
            subtext: '',
            x:'center'
        },
        tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
        legend: {},
        series : []
    });
    osChart.showLoading();
    
    let weekChart = echarts.init(document.getElementById("week-container"), layui.echartsTheme);
    weekChart.setOption({
        tooltip: {trigger: "axis"},
        legend: {
            data: ['访问量(PV)', '独立用户(UV)']
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: !1,
                data: []
            }
        ],
        yAxis: [{type: "value"}],
        series: []
    });
    weekChart.showLoading();
    
    admin.req('api-log/requestStat', {}, function (data) {
        statData = data;
        $('#pv').html(data.currDate_pv);
        $('#uv').html(data.currDate_uv);
        $('#weekPv').html(data.currWeek_pv);
        $('#monthPv').html(data.currMonth_pv);
        $('#userCnt').html(data.currHour_uv);
        
        browserChart.hideLoading()
        browserChart.setOption({
            legend: {
                orient: 'vertical',
                x: 'left',
                data: data.browser_legendData
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['60%', '60%'],
                    data: data.browser_datas
                }
            ]
        });
        
        osChart.hideLoading()
        osChart.setOption({
            legend: {
                orient: 'vertical',
                x: 'left',
                data: data.operatingSystem_legendData
            },
            series : [
                {
                    name: '操作系统',
                    type: 'pie',
                    radius : '55%',
                    center: ['60%', '60%'],
                    data: data.operatingSystem_datas
                }
            ]
        });
        
        weekChart.hideLoading()
        weekChart.setOption({
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: !1,
                    data: data.statWeek_items
                }
            ],
            series: [
                {
                    name: '访问量(PV)',
                    type: 'line',
                    smooth: !0,
                    itemStyle: {normal: {areaStyle: {type: "default"}}},
                    data: data.statWeek_pv
                },
                {
                    name: '独立用户(UV)',
                    type: 'line',
                    smooth: !0,
                    itemStyle: {normal: {areaStyle: {type: "default"}}},
                    data: data.statWeek_uv
                }
            ]
        });
    }, 'GET');
});
</script>
</body>
</html>